<template>
  <div class="single-choice-edit-block-container">
    <!-- 题干 -->
    <div class="stem">
      <span style="color: #a8a8b3">(单选题)</span>
      <edit-block :blockType="`title`" :content="topic.title"></edit-block>
      <!-- <div>{{ topicCopy.title }}</div> -->
    </div>

    <!-- 选项 -->
    <div class="xuanxiang">
      <ol type="A">
        <li
          class="option"
          v-for="(opt, idx) in topic.opts"
          :key="opt"
          :class="topic.correct == idx ? 'selected' : ''"
          @click="handleOptClick(idx)"
        >
          <edit-block
            :content="opt"
            :blockType="`opt`"
            :currentOptIndex="idx"
          ></edit-block>
        </li>
      </ol>
    </div>

    <!-- 解析 -->
    <explain-edit-block :explain="topic.explain"></explain-edit-block>

  </div>
</template>

<script>
import EditBlock from "@/components/EditBlock.vue";
import ExplainEditBlock from "../ExplainEditBlock.vue";
import { mixin } from "@/mixin";
// import RichEditor from "../RichEditor2.vue";
export default {
  name: "SingleChoice",
  mixins: [mixin],
  components: { EditBlock, ExplainEditBlock },
  // props: ["type", "topic"],
  data() {
    return {
      topicTemplate: {
        title: "示例标题",
        opts: ["示例选项1", "示例选项2", "示例选项3", "示例选项4"],
        explain: "示例解析",
        correct: 0,
      },
      questionType: "sc",
    };
  },
  methods: {
    // setExplain(explain) {
    //   this.topic.explain = explain;
    // },
    // create() {
    //   // console.log(this.topic)
    //   //
    //   // const data = {
    //   //   ...this.topic,
    //   // }
    //   // 发送网络请求
    //   // this.$http
    //   //   .post(`${this.$reqPrefix}/createExcercise`, {
    //   //     type: "sc",
    //   //     ...this.topic,
    //   //   })
    //   //   .then((res) => {
    //   //     const { tid } = res.data.data;
    //   //     new BroadcastChannel("topic").postMessage({
    //   //       tid,
    //   //       ...this.topic
    //   //     });
    //   //   });
    //   // new BroadcastChannel("topic").postMessage({
    //   //   tid: "001",
    //   //   ...this.topicCopy,
    //   // });
    //   // alert("创建成功！");
    // },
    // edit() {
    //   console.log("edit");
    //   // 能不能写了然后解析啊
    //   this.dialogVisible = true;
    // },
    // changeIsEdit() {
    //   this.dialogVisible = !this.dialogVisible;
    // },
    // setContent(c) {
    //   // console.log(111)
    //   // this.topicText = c
    //   // 拿到文本进行解析
    //   const reg = /<p>(?<content>.*)<\/p>/;
    //   const result = reg.exec(c);
    //   // console.log(result)
    //   this.topicCopy = JSON.parse(result.groups.content);
    // },
    handleOptClick(idx) {
      // if (this.type == "lock") {
      //   return;
      // } else if (this.type == "edit") {
      //   this.topicCopy.correct = idx;
      // }
      this.$store.commit("topicAbout/SET_CORRECT", idx);
    },
  },
  created() {
    // console.log(this.props)
    // const { topic } = this.props;
    if (this.topic == undefined) {
      this.topicCopy = {};
    } else {
      this.topicCopy = this.topic;
    }
  },
};
</script>

<style lang='less' scoped>
.single-choice-edit-block-container {
  min-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .stem {
    display: flex;
  }
  .xuanxiang {
    ol {
      // list-style: none;
      padding-left: 80px;
      //   padding: 0;
      li {
        font-size: 14px;
        // height: 20px;
        // margin-bottom: 10px;
        margin-top: 16px;
        line-height: 20px;
        font-family: "微软雅黑", "黑体", Arial, Helvetica, sans-serif;
        &:last-child {
          margin-bottom: 0;
        }
        span {
          // color: #cfcccc;
          display: inline-block;
          margin-right: 20px;
        }
      }
    }
  }
}
// .selected {
//   // background-color: #fff200;
//   min-width: 50px;
//   border-radius: 10px;
//   font-size: 20px !important;
//   font-weight: 500;
//   color: red;

//   &::marker {
//     color: red;
//     font-size: 20px !important;
//   }
// }
</style>